<template>
  <div style="padding:30px;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="员工名">
        <el-input v-model="form.name" placeholder="员工名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
         <el-select v-model="form.name2" clearable placeholder="请选择">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
         </el-select>
      </el-form-item>

      <el-form-item label="是否锁定">
         <el-select v-model="form.typeName" clearable placeholder="请选择">
              <el-option label="是" value="0"></el-option>
              <el-option label="否" value="1"></el-option>
         </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
         <el-col :span="11">
           <el-date-picker type="date" placeholder="选择日期" v-model="form.beginDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
         </el-col>
         <el-col class="line" :span="2">-</el-col>
         <el-col :span="11">
           <el-date-picker type="date" placeholder="选择日期" v-model="form.endDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
         </el-col>
       </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-col :span="100"><el-button type="success" @click="adds()">新增</el-button></el-col>
      </el-form-item>
    </el-form>

    <el-row type="flex" class="row-bg">
      <el-col :span="20">
        <div class="grid-content bg-purple-light">
          <el-table ref="filterTable" :data="tableData" height="250" border style="height: 100%">
              <el-table-column prop="id" label="编号">
              </el-table-column>
              <el-table-column prop="userName" label="员工名">
              </el-table-column>
              <el-table-column prop="sex" label="性别">
              </el-table-column>
              <el-table-column prop="account" label="账号">
              </el-table-column>
              <el-table-column prop="password" label="密码">
              </el-table-column>
              <el-table-column prop="phone" label="电话"  width="110">
              </el-table-column>
              <el-table-column prop="pwdWrong" label="密码错误次数">
              </el-table-column>
              <el-table-column prop="isLockout" label="是否锁定">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.isLockout == '0' ? 'danger' : 'primary'" disable-transitions>
                  {{scope.row.isLockout==0?'已锁定':'未锁定'}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="lockTime" label="锁定时间" value-format="yyyy-MM-dd HH:mm:ss"  width="120">
              </el-table-column>
              <el-table-column prop="beiyong2" label="创建时间" value-format="yyyy-MM-dd HH:mm:ss"  width="120">
              </el-table-column>
              <el-table-column prop="state" label="状态">
              </el-table-column>
              <el-table-column prop="description" label="员工描述">
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="325">
                <template slot-scope="scope">
                  <el-button @click="roleus(scope.row)" type="success" size="mini">分配角色</el-button>
                  <el-button @click="setDepot(scope.row)" type="success" size="mini">编辑</el-button>
                  <el-button @click="setPwd(scope.row)" type="success" size="mini">重置密码</el-button>
                  <el-button @click="delDepot(scope.row)" type="danger" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

          <div class="block">
            <el-tag class="demonstration">调整每页显示条数</el-tag>
            <el-pagination
             background layout="sizes,prev, pager, next"
             :total="count"
             :page-sizes="[3, 4, 5, 6]"
              :page-size="3"
               @current-change="getAllByLimit"
                @size-change="handleSizeChange">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

            <el-dialog title="添加员工" :visible.sync="addshow">
            <el-form :model="adduser">
                <el-form-item label="员工名">
                  <el-input v-model="adduser.userName" placeholder="员工名"></el-input>
                </el-form-item>
              <el-form-item label="性别">
                 <el-select v-model="adduser.sex" clearable placeholder="请选择">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                 </el-select>
              </el-form-item>
              <el-form-item label="员工账号">
                <el-input v-model="adduser.account" placeholder="账号"></el-input>
              </el-form-item>
              <el-form-item label="员工密码">
                <el-input v-model="adduser.password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item label="员工电话">
                <el-input v-model="adduser.phone" placeholder="电话"></el-input>
              </el-form-item>
              <el-form-item label="员工状态">
                <el-input v-model="adduser.state" placeholder="状态"></el-input>
              </el-form-item>
              <el-form-item label="员工描述">
                <el-input v-model="adduser.description" placeholder="员工描述"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pushs()">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>

            <el-dialog title="修改员工" :visible.sync="setshow">
            <el-form :model="setform">
                <el-form-item label="员工名">
                    <el-input v-model="setform.userName" placeholder="员工名"></el-input>
                  </el-form-item>
                <el-form-item label="性别">
                   <el-select v-model="setform.sex" clearable placeholder="请选择">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="员工账号">
                  <el-input v-model="setform.account" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item label="员工密码">
                  <el-input v-model="setform.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item label="员工电话">
                  <el-input v-model="setform.phone" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item label="员工状态">
                  <el-input v-model="setform.state" placeholder="状态"></el-input>
                </el-form-item>
                <el-form-item label="员工描述">
                  <el-input v-model="setform.description" placeholder="员工描述"></el-input>
                </el-form-item>
                <el-form-item label="是否锁定">
                   <el-select v-model="setform.isLockout" clearable placeholder="请选择" value-key="setform.isLockout">
                        <el-option label="已锁定" :value="0" :key="0"></el-option>
                        <el-option label="未锁定" :value="1" :key="1"></el-option>
                   </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addpush()">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>
            <el-dialog title="角色分配" :visible.sync="roleuser">
            	<template slot-scope="scope">
            <el-transfer
            	 v-model="value"
            	 :titles="['未拥有', '已拥有']"
            	 @change="handleChange"
            	 :props="{key:'roleId',label:'roleName'}"
            	 :data="userrole">
            </el-transfer>
            </template>
            </el-dialog>
  </div>
</template>

<script>
  import {getAll,set,del,add,resetPassword} from '@/api/user.js';
  import {tree,treeinsert,treedels} from '@/api/userrole.js';
  import {roleAll} from '@/api/role.js';
  import {getUserId} from '@/utils/auth';
  export default {
    data() {
      return {
      	value:[],
      	userrole:[],
        form: {
          name: '',
          name2: '',
          typeName:'',
          beginDate:'',
          endDate:''
        },
        page: 1,
        limit: 3,
        tableData: [],
        count: 4,
        addshow:false,
        adduser: {
          userName: '',
          sex: '',
          account: '',
          password: '',
          phone: '',
          state: '',
          description: ''

        },
        setshow:false,
        roleuser:false,
        userId:'',
        setform: {
          id:'',
          userName: '',
          sex: '',
          account: '',
          password: '',
          isLockout:'',
          phone: '',
          state: '',
          description: ''
        }
      }
    },
    created() {
      this.getAllByLimit(1);
    },
    methods: {
      //分页查询所有
      getAllByLimit(val) { // 修改当前页所触发的函数
        return new Promise((resolve, reject) => {
          getAll({
            'limit': this.limit,
            'page': val,
            'name': this.form.name,
            'name2':this.form.name2,
            'typeName':this.form.typeName,
            'beginDate':this.form.beginDate,
            'endDate':this.form.endDate
            }).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //当limit修改时分页查询所有
      handleSizeChange(val){
          return new Promise((resolve, reject) => {
            getAll({'limit': val,'page': 1}).then(response => {
              const {data,count} = response
              this.tableData = data;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
      },
      //模糊查询表单提交
      onSubmit() {
        return new Promise((resolve, reject) => {
          getAll({
            'limit': this.limit,
            'page': this.page,
            'name': this.form.name,
            'name2':this.form.name2,
            'typeName':this.form.typeName,
            'beginDate':this.form.beginDate,
            'endDate':this.form.endDate
          }).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //添加按钮事件
       adds(){
            this.addshow=true;
      },
     //取消让弹框隐藏
      err(){
            this.addshow=false;
            this.setshow=false;
            location.reload();
      },//员工信息编辑
      setDepot(row){
          this.setshow=true;
          this.setform=row;
          this.setform.stare=row.standby1;
      },
      //重置密码
      setPwd(row){
        return new Promise((resolve, reject) => {
          resetPassword({
            'id': row.id
          }).then(response => {
            console.log(response);
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success',
                onClose:  () =>{
                  this.err();
                }
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //角色分配
      roleus(row){
      	this.userrole=[];
      	this.userId=row.id;
      	this.value=[];
          this.roleuser=true;
          roleAll({}).then(response => {
          	this.userrole=response.data;
        });
        console.log(this.userrole);
        tree({'typeId':row.id}).then(response => {
        	for(let i=0;i<response.data.length;i++){
      		this.value.push(response.data[i].roleId);
      	}
        });
      },//员工分配角色
      handleChange(value, direction, movedKeys) {
		      console.log(value);
		      console.log(direction);
		      console.log(movedKeys);
		      //去除角色
		      if(direction=="left"){
		      	treedels({'namelist':movedKeys,'typeName':this.userId}).then((res)=>{
		      		if (res.data) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success',
            onClose:  () =>{
		            location.reload();
		            }
          });
        } else {
        	this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
		      	})
		      }else{
		      	treeinsert({'namelist':value,'typeName':this.userId}).then((res)=>{
		      		if (res.data) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success',
            onClose:  () =>{
		            location.reload();
		            }
          });
        } else {
        	this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
		      	})
		      }
          this.userrole.id = movedKeys;//文件列表的id数组
    },
      //提交添加
      pushs() {
        return new Promise((resolve, reject) => {
          add({
            'userName': this.adduser.userName,
            'sex':this.adduser.sex,
            'account' :this.adduser.account,
            'password' :this.adduser.password,
            'phone' :this.adduser.phone,
            'state' :this.adduser.state,
            'description' :this.adduser.description
          }).then(response => {
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success'
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //提交修改
      addpush() {
        return new Promise((resolve, reject) => {
          set({
            'id' : this.setform.id,
            'userName': this.setform.userName,
            'sex':this.setform.sex,
            'account' :this.setform.account,
            'password' :this.setform.password,
            'phone' :this.setform.phone,
            'state' :this.setform.state,
            'description' :this.setform.description,
            'isLockout' :this.setform.isLockout
          }).then(response => {
            console.log(response);
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success',
                onClose:  () =>{
                  this.err();
                }
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      delDepot(row) {
        this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(response => {
           return new Promise((resolve, reject) => {
             del({'id': row.id}).then(response => {
              if(response.data){
                this.$message({
                          message: response.msg,
                          type: 'success',
                          onClose:  () =>{

                          }
                        });
              }else{
                 this.$message.error(response.msg);
              }
               resolve()
             }).catch(error => {
               reject(error)
             })
           })
            resolve()
          }).catch(error => {
            reject(error)
          })
      }
    }
  }
</script>

<style>

</style>
